<template>
  <header>
    <div class="main wrap">
      <div class="content">
        <div class="title">
          <router-link to="/"> 新中地天气 </router-link>
        </div>
        <div class="cityDetails">
          <h4>{{ weatherNow.city }}</h4>
          <div class="weather">实时天气:</div>
          <div class="weather">{{ weatherNow.weather }} {{ weatherNow.temperature }}°C</div>
          <div class="weather">{{weatherNow.winddirection}}风 {{weatherNow.windpower}}级</div>
        </div>
      </div>
      <!-- 右侧按钮 -->
       <slot name="dialog"></slot>
       <slot name="addCity"></slot>
    </div>
  </header>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getAdcodeApi, getCityApi, getWeatherNowApi } from '@/api/weather'

// ========================

const ipCity = ref({})
const adCode = ref(0)
const weatherNow = ref({})

onMounted(async () => {
  // 更新城市对象
  ipCity.value = await getCityApi()
  // 根据当前城市名字更新城市code
  const codeRes = await getAdcodeApi(ipCity.value.city)
  adCode.value = codeRes.geocodes[0].adcode
  // 根据城市code获取实况天气
  const WeatherNowRes = await getWeatherNowApi(adCode.value)
  weatherNow.value =WeatherNowRes.lives[0]
  // console.log(weatherNow.value)
})
</script>

<style lang="scss" scoped>
@import '../assets/main.scss';
header {
  height: 100px;
  min-width: 1200px;
  background-color: $nav-color;
  border-radius: 10px 0 0 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 100px;
    .content {
      // position: relative;
      color: $text-color;
      display: flex;
      align-items: center;
      .title {
        font-size: 1.5rem;
      }
      // 城市详情天气
      .cityDetails {
        display: flex;
        gap: 1rem;
        margin-left: 1rem;
        .weather {
          font-size: 16px;
        }
      }
      // &::before {
      //   position: absolute;
      //   left: 5px;
      //   content: url('../sun.png');
      // }
    }

  }
}

</style>
